<template>
    <div class="wrapper">
        <image :src="logo" class="logo" @click="jump"/>
        <text class="greeting">The environment is ready!</text>
        <HelloWorld/>
    </div>
</template>

<script>

  let navigator = weex.requireModule('navigator');
  let modal = weex.requireModule('modal');

  import HelloWorld from './youxuan/components/HelloWorld.vue'
  import bundle from './bundle'

  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    created () {
      bundle.initIconFont();
    },
    methods: {
      jump(event) {
        const url = bundle.setBundleUrl(weex.config.bundleUrl, 'youxuan/views/my.js');
        navigator.push({
            url: url,
            animated: "true"
          },
          event => {
            modal.toast({message: 'callback: ' + event})
          }
        )
      }
    },
    data() {
      return {
        logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
      }
    }
  }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 424px;
        height: 200px;
    }

    .greeting {
        text-align: center;
        margin-top: 70px;
        font-size: 50px;
        color: #41B883;
    }

    .message {
        margin: 30px;
        font-size: 32px;
        color: #727272;
    }
</style>
